<template>
  <el-card>
    <el-card style="margin-bottom: 30px;">
      <div class="group-container">
         <span style="font-size: 18px" >体检分类:</span>
        <el-radio-group v-model="categoryIds.categoryId" value-key="id" @change="list">
          <el-radio-button>不限</el-radio-button>
          <el-radio-button
              v-for="item in categoryList"
              :label="item.id"
              :key="item.id">{{item.name}}</el-radio-button>

        </el-radio-group>
      </div>

      <div class="group-container">
        <span style="font-size: 18px" >人群选择:</span>
        <el-radio-group v-model="people"  @change="list">
          <el-radio-button  key="" label="">不限</el-radio-button>>
          <el-radio-button  key="1" label="1">男性</el-radio-button>>
          <el-radio-button  key="2" label="2">女性</el-radio-button>>
        </el-radio-group>
      </div>

    </el-card>
    <el-card  style="margin-top: 10px;">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="categoryName" label="体检类型" />
        <el-table-column prop="image"
                         label="图片" width="250">
          <template slot-scope="{ row }">
            <el-image style="width: 200px; height: 200px; border: none; cursor: pointer"
                      :src="row.image">
              <div slot="error"
                   class="image-slot">
                <img src="../assets/noImg.png"
                     style="width: auto; height: 40px; border: none">
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="套餐名称"/>
        <el-table-column prop="setmealChecks" label="体检包含项目" >
          <template slot-scope="scope">
            <el-button  @click="visibleCheck(scope.row)">
            查看项目
            </el-button>
          </template>

        </el-table-column>

        <el-table-column prop="price" label="套餐价格费用" />
        <el-table-column prop="description" label="描述" />
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button type="primary" @click="visibleReservation(scope.row)">
              <i class="iconfont icon-r-add" style="font-size: 26px"></i>
              立即预约
            </el-button>
          </template>
        </el-table-column>
      </el-table>


      <div style="margin: 10px 0">
        <el-pagination
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2,5,10,15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">

        </el-pagination>
      </div>


      <el-dialog title="提示" :visible.sync="dialogVisible">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px">
          <el-form-item label="用户名"  label-width="80px" prop="username">
            <el-input v-model="form.username" style="width: 80%" disabled></el-input>
          </el-form-item>
          <el-form-item label="姓名"  label-width="80px" prop="realname">
            <el-input v-model="form.realname" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" label-width="80px" prop="idNumber">
            <el-input v-model="form.idNumber" style="width: 80%">
            </el-input>
          </el-form-item>
          <el-form-item label="手机号" label-width="80px" prop="phone">
            <el-input v-model="form.phone" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="性别" label-width="80px"  prop="sex">
            <el-radio v-model="form.sex" label="1">男</el-radio>
            <el-radio v-model="form.sex" label="0">女</el-radio>
          </el-form-item>

          <el-form-item label="体检类型:"  label-width="120px" prop="categoryId">
            <el-select v-model="form.categoryId"
                       placeholder="请选择套餐分类"
                       @change="$forceUpdate()"
                       disabled>
              <el-option v-for="(item, index) in setMealList"
                         :key="index"
                         :label="item.name"
                         :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="套餐名称:"  label-width="120px" prop="name">
            <el-input v-model="form.name" style="width: 80%"  :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="套餐费用" label-width="120px" prop="price">
            <el-input v-model="form.price" style="width: 80%"  :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="套餐包含项目" label-width="120px" prop="checksIds">
            <el-select
                v-model="form.checksIds"
                multiple
                placeholder="请选择"
                disabled
            >
              <el-option
                  v-for="item in options"
                  :key="item.checkId"
                  :label="item.name"
                  :value="item.checkId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div>
            <el-form-item label="套餐图片:"
                          required
                          prop="image">
              <el-image :src="form.image" style="width: 200px; height: 200px; border: none; cursor: pointer"></el-image>
            </el-form-item>
          </div>
        </el-form>
        <template #footer>
        <span  slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          <i class="iconfont icon-r-left" style="font-size: 20px;"></i> 取 消</el-button>
        <el-button type="primary" @click="save">
          <i class="iconfont icon-r-yes" style="font-size: 20px;"></i>预约</el-button>
        </span>
        </template>
      </el-dialog>

      <el-dialog title="体检项目查询" :visible.sync="checkVisible">
        <el-table :data="checkData">
          <el-table-column property="name" label="体检名称" width="150"></el-table-column>
          <el-table-column property="price" label="价格"width="100"></el-table-column>
          <el-table-column property="description" label="描述" ></el-table-column>

        </el-table>
      </el-dialog>
    </el-card>
  </el-card>

</template>
<script>

import request from "@/utils/request";
import ImageUpload from "@/components/ImgUpload";
import {getUserName} from "@/utils/storage";

export default {
  components: {
    ImageUpload
  },
  data() {
    return {
      userName: getUserName() ,
      categoryList: [],
      categoryIds: [],
      people:"",
      tableData:[],
      checkData:[],
      dialogVisible : false,
      checkVisible: false,
      form:{},
      options: [],
      setMealList: [],
      currentPage:1,//当前页
      pageSize:5,//每页显示数据数
      total:10,//共多少条数据
      rules:{
        realname:[
          {required: true, message: "请输入姓名", trigger: "blur"},
          {pattern: /^[\u4e00-\u9fa5]+$/, message: "格式错误", trigger: "blur"}
        ],
        phone: [
          {required: true, message: "请输入电话号", trigger: "blur"},
          {min: 11, max: 11, message: "长度必须是11个字符", trigger: "blur",},
          //使用正则表达式输入的数据进行校验=> java基础我们讲过正则表达式
          {pattern: /^([1-9]\d*|0)$/, message: "请输入数字", trigger: "blur"}
        ],
        idNumber: [
          {required: true, message: "请输入身份证号码", trigger: "blur"},
          {min: 18, max: 18, message: "长度必须是18个字符", trigger: "blur"},
          {pattern: /^([1-9]\d*|0)$/, message: "请输入数字", trigger: "blur"}
        ]
      },

    };
  },
  created() {
      this.getcategoryName();
      this.getUser();
      this.list();
  },
  methods:{
    getUser(){
      request.get("/api/user/"+ this.userName).then(res => {
        console.log("user-res-",res)
        this.form.username= res.data.data.username;
        this.form.realname= res.data.data.name;
        this.form.idNumber= res.data.data.idNumber;
        this.form.phone= res.data.data.phone;
        this.form.sex=res.data.data.sex;
        this.form.userId=res.data.data.id;
        console.log(" this.form", this.form)
      })
    },
    getCheck(){
      request.get("/api/check/list").then(res=>{
        console.log("checkoptions",res.data.data);
        if(res.data.code == 1){
          this.options = res.data.data.map(item=>({
            checkId : item.id,
            name: item.name,
            price: item.price,
            setmealId: this.form.id
          }))
        }
      })
    },
    getcategoryName(){
      request.get("/api/category/list").then(res=>{
        console.log("list",res.data.data);
        if(res.data.code == 1){
          this.categoryList = res.data.data
          this.setMealList = res.data.data
          this.categoryIds = res.data.data.map(item=>({
            categoryId : item.id,
          }))
        }
      })
    },
    list() {
      request.get("/api/setmeal/page",{
        params:{//指定请求携带的参数
          page:this.currentPage,
          pageSize:this.pageSize,
          name:this.search,
          categoryId: this.categoryIds.categoryId,
          people: this.people
        }}).then(res => {
        console.log("res=",res)
        //绑定 tableData, 显示在表格
        this.tableData =res.data.data.records
        this.total=res.data.data.total
        console.log("this.checkData=",this.checkData)
      })
    },
    visibleReservation(row){
      for(let key in row){
        if(row.hasOwnProperty(key)){
          this.form[key] = row[key];
        }
      }
      this.getCheck();
      this.dialogVisible= true
    },
    visibleCheck(row){
      this.checkData=row.setmealChecks
      this.checkVisible=true
    },
    save(){
      this.$refs['form'].validate((valid)=>{
        //测试前端效验放行
        //valid=true
        console.log("valid",valid)
        if(valid){//进行效验,通过
          console.log("this.form",this.form)
          request.post("/api/order", this.form).then(res => {
            console.log(res)
            if(res.data.code==1){

              this.$message({
                type:"success",
                message:"预约成功"
              })
              this.dialogVisible = false;
              //调用list方法, 刷新数据
              this.list();
            }else {
              this.$message({
                type:"error",
                message: res.data.msg
              })
              this.dialogVisible = false;
              //调用list方法, 刷新数据
              this.list();
            }
          }).catch(err => {
            this.$message.error('请求出错了：' + err.message)
          })
        }else {//效验没通过
          this.$message({
            type:"error",
            message:"验证失败,不提交"
          })
          return false;
        }
      })
    },

    handleCurrentChange(pageNum){//处理分页请求
      //当用户点击分页超链接时会携带pageNum
      console.log("pageNum",pageNum)
      this.currentPage=pageNum
      //发出分页请求
      this.list()
    },
    handlePageSizeChange(pageSize){
      console.log("pageSize",pageSize)
      this.pageSize=pageSize
      this.list()
    },

  }
}
</script>
<style scoped lang="scss">
.group-container {
  display: flex;
  align-items: center;
  margin-bottom: 30px; /* 设置下方外边距为 20px，控制不同 div 元素之间的间隔 */
  margin-top: 10px
}
.group-container span {
  margin-right: 95px; /* 设置右边距为 10px */
}
.group-container1 {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* 设置下方外边距为 20px，控制不同 div 元素之间的间隔 */
  margin-top: 10px
}
.group-container1 span {
  margin-right: 30px; /* 设置右边距为 10px */
}
</style>

